// Name:            Position
// Description:     Utilities to position content
//
// Component:       `uk-position-absolute`
//                  `uk-position-relative`
//                  `uk-position-z-index`
//                  `uk-position-top`
//                  `uk-position-bottom`
//                  `uk-position-left`
//                  `uk-position-right`
//                  `uk-position-top-left`
//                  `uk-position-top-right`
//                  `uk-position-bottom-left`
//                  `uk-position-bottom-right`
//                  `uk-position-center`
//                  `uk-position-center-left`
//                  `uk-position-center-right`
//                  `uk-position-cover`
//
// Modifiers:       `uk-position-small`
//                  `uk-position-medium`
//
// ========================================================================


// Variables
// ========================================================================

@position-small-margin:                                @global-small-gutter;
@position-medium-margin:                               @global-gutter;


/* ========================================================================
   Component: Position
 ========================================================================== */


/* Directions
 ========================================================================== */

[class*='uk-position-top'],
[class*='uk-position-bottom'],
[class*='uk-position-left'],
[class*='uk-position-right'],
[class*='uk-position-center'] { position: absolute !important; }


/* Edges
 ========================================================================== */

/* Don't use `width: 100%` because it is wrong if the parent has padding. */
.uk-position-top {
    top: 0;
    left: 0;
    right: 0;
}

.uk-position-bottom {
    bottom: 0;
    left: 0;
    right: 0;
}

.uk-position-left {
    top: 0;
    bottom: 0;
    left: 0;
}

.uk-position-right {
    top: 0;
    bottom: 0;
    right: 0;
}


/* Corners
 ========================================================================== */

.uk-position-top-left {
    top: 0;
    left: 0;
}

.uk-position-top-right {
    top: 0;
    right: 0;
}

.uk-position-bottom-left {
    bottom: 0;
    left: 0;
}

.uk-position-bottom-right {
    bottom: 0;
    right: 0;
}

/*
 * Center
 */

.uk-position-center {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

/* Vertical */
.uk-position-center-left,
.uk-position-center-right {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.uk-position-center-left { left: 0; }
.uk-position-center-right { right: 0; }

/* Horizontal */
.uk-position-top-center,
.uk-position-bottom-center {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.uk-position-top-center { top: 0; }
.uk-position-bottom-center { bottom: 0; }


/* Cover
 ========================================================================== */

.uk-position-cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}


/* Utility
 ========================================================================== */

.uk-position-relative { position: relative !important; }

.uk-position-absolute { position: absolute !important; }

.uk-position-fixed { position: fixed !important; }

.uk-position-z-index { z-index: 1; }



/* Margin modifier
 ========================================================================== */

/*
 * Small
 */

.uk-position-small[class*='uk-position-top']:not(.uk-position-top-center),
.uk-position-small[class*='uk-position-bottom']:not(.uk-position-bottom-center),
.uk-position-small[class*='uk-position-left'],
.uk-position-small[class*='uk-position-right'],
.uk-position-small.uk-position-cover { margin: @position-small-margin; }

.uk-position-small[class*='uk-position-top'] { margin-top: @position-small-margin; }
.uk-position-small[class*='uk-position-bottom'] { margin-bottom: @position-small-margin; }

.uk-position-small.uk-position-center-left { margin-left: @position-small-margin; }
.uk-position-small.uk-position-center-right { margin-right: @position-small-margin; }

/*
 * Medium
 */

.uk-position-medium[class*='uk-position-top']:not(.uk-position-top-center),
.uk-position-medium[class*='uk-position-bottom']:not(.uk-position-bottom-center),
.uk-position-medium[class*='uk-position-left'],
.uk-position-medium[class*='uk-position-right'],
.uk-position-medium.uk-position-cover { margin: @position-medium-margin; }

.uk-position-medium[class*='uk-position-top'] { margin-top: @position-medium-margin; }
.uk-position-medium[class*='uk-position-bottom'] { margin-bottom: @position-medium-margin; }

.uk-position-medium.uk-position-center-left { margin-left: @position-medium-margin; }
.uk-position-medium.uk-position-center-right { margin-right: @position-medium-margin; }



// Hooks
// ========================================================================

.hook-position-misc;

.hook-position-misc() {}
